<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
        
        跨域 问题 

             只要出现下面的报错
                Access to XMLHttpRequest at 'http://192.168.5.27:3000/ap/api/todos/readlist.php' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: 
                No 'Access-Control-Allow-Origin' header is present on the requested resource.
             说明请求 出现 跨域问题

             什么叫跨域：
               浏览器的策略
                  a.com 网站 访问 b.com 网站的接口-- 浏览器为了保护咱们网站-默认禁止跨域访问的
                  网站 和 接口 域名---三个有一个不一样就算是跨域 ，协议 域名 端口好

                  a.com--b.com   跨域
                  a.com:3000--a.com:4000   跨域
                  a.com:3000--a.com   跨域  (http协议 默认是80，https 协议默认是443)
                  http://a.com--https://a.com   跨域  

                浏览器中的同源策略--只有 协议 域名 端口号一致 才算同源，否则就叫跨域。


                解决跨域问题
                    1-  (后端配置)通过服务器配置响应头（cors） 来允许跨域
                        cors 跨域资源共享策略--在服务器配置响应头 
                            Access-Control-Allow-Origin：*
                            允许访问的来源网站：*  允许所有网站访问 这个接口
                            允许访问的来源网站：a.com  允许a.com网站访问 这个接口
                        
                    2-代理服务器
                          浏览器--同源策略--存在 浏览器和服务器之间的
                          服务器和服务器之间是没有同源策略的

                          a.com  ->   b.com
                          a.com  买一个服务器 c.com    
                            a访问服务器（配置允许跨域） c ， c访问b

                            实际工作中-- 开发中--会出现跨域问题

                                        前端有liveserver 产生一个测试服务器
                                        后端有自己的测试服务器 

                                        前端自己搞一个代理服务器（后端搞一个代理服务器 nginx）
                            上线以后（前端代码和后端的代码都放到公司正式服务器上）就没有跨域问题了            

                    3-代理插件    
                         三阶段--项目中安装一个代理插件--代理插件会生成代理服务器（临时的代理服务器）只能在开发中临时用用，上线以后不能使用


                    4-jsonp （用的很少--早期--目前-搜索公司在用）
                        前端利用script标签的src属性，发起请求

                    5-  
        
        */


        /*
             怎么解决项目中跨域问题
                1- 服务器配置响应头（cors）
                2- 代理服务器（nginx）
                3- 代理插件，只能在开发中使用
                4- jsonp-很少用-  （document.createElement）
                5- webSocket--常见聊天软件（网页中聊天-客服聊天） 双向实时通信 
                    let ws = new WebSocket()
                    ws.send()
                    ws.onmesssage = function(e){e.data}
                    
                    微信-qq 使用都是socket-- 双向实时通信    
                    
                    
                  默认跨域请求是不发送 cookie，但是可以在axios中配置  withCredentials: false, // default -
                  配置为true 就会发送cookie
                  
                  
                  nginx -https://blog.csdn.net/qq_45635347/article/details/131444002
        */
    </script>

</body>

</html>